<template>
  <div class="feed-detail">
    <div class="name-user">
      <div class="name">通过法考的，可以传授下经验吗？通过法考的，可以传授下经验吗？通过法考的，可以传授下经验吗？</div>
      <FeedUserBtn class="feed-user-btn" @click="bindShare"></FeedUserBtn>
    </div>
    <div class="feed-content">
      <div class="content">
        答主是去年参加法考，客观题223分，主观题13.14分，顺利
        一次通过。由于我是大龄在职非法本零考的学校。临床前试验一般分为分子发现阶段和动物实验阶段，内容涵
        盖了从制剂、药理学、药效动力学、毒理学。
      </div>
      <div class="imgs">
        <image class="img" src="" v-for="(item, index) in [1,2,3,4,5,6]"></image>
      </div>
      <div class="date">发布于 2020-02-18 11:00</div>
    </div>

    <div class="">
      <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
                   @scrolltolower="lower" @scroll="scroll">
        <div class="flex align-center justify-between  head">
          <div class="count">4 条评论</div>
          <div class="flex align-center filters">
            <div class="filter active">最新</div>
            <div class="border"></div>
            <div class="filter">默认</div>
          </div>
        </div>

        <div class="feed-user-list">
          <div class="item" v-for="(item, index) in [1,2,3,4,5,6,2,3,4,5,6,2,3,4,5,6]">
            <div class="item-mark">所以中医的原理就有点意思了，草药针灸其实是激发
              自身免疫系统，病能不能好全靠病人自己的体质。所以中医的原理就有点意思了，草药针灸其实是激发
              自身免疫系统，病能不能好全靠病人自己的体质。</div>

            <div class="flex align-center justify-between">
              <div class="flex align-center  user">
                <image class="user-icon"></image>
                <div class="user-name">我是一条机器人</div>
              </div>
              <div class="date" >2020-02-18</div>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script lang="ts" setup>

import FeedUserBtn from "../../components/FeedUserBtn.vue";
import {onMounted, shallowRef} from "vue";
import {parseQuery} from "../../utils/URLParam";
import {article_data} from "../../api/Feed";
import {useWxShare} from "../../utils/wxJSSdk/useWxShare";

const detail = shallowRef({});
onMounted(() => {
  const {id} = parseQuery()
  article_data(id).then(res => {
    detail.value = res
  })
})

const upper = function(e) {
  console.log(e)
}
const lower= function(e) {
  console.log(e)
}
const scroll = function(e) {
  console.log(e)
}

// todo
const bindShare = () => {
  useWxShare({
    title: "title",
    desc: "desc",
    link: location.href,
  });
}
</script>

<style lang="scss" scoped>
.feed-detail {

}

.name-user {
  margin: 0 32rpx ;
  padding: 32rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
  .name {
    padding:  0 0 30rpx;
  }
}

.feed-content {
  padding: 34rpx 32rpx;
  .content {
    font-size: 24rpx;
    font-weight: 500;
    color: #0D3333;
    line-height: 34rpx;
  }
  .imgs {
    .img {
      width: 100%;
      height: 276rpx;
      margin: 20rpx 0 0;
    }
  }
  .date {
    font-size: 24rpx;
    font-weight: 500;
    color: #0D3333;
    line-height: 34rpx;
    margin: 20rpx 0;
  }
}

.scroll-Y {
  padding: 32rpx;
  width: auto;
  .head {
    height: 104rpx;
    background: #FFFFFF;
    border-bottom: 2rpx solid #EBEBEB;
    padding: 0 32rpx;
    .count {
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 40rpx;
    }
    .filters {
      .filter {
        height: 34rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #0D3333;
        line-height: 34rpx;
      }
      .border {
        width: 2rpx;
        height: 20rpx;
        background: rgba(13, 51, 51, 0.25);
        margin: 0 24rpx;
      }
    }
  }

  .feed-user-list {
    padding: 0 38rpx;
    .item {
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
      .item-mark {
        font-size: 24rpx;
        font-weight: 400;
        color: #0D3333;
        line-height: 34rpx;
        padding: 24rpx 0;
      }

      .user {
        padding: 0 0 24rpx;
        .user-icon {
          width: 44rpx;
          height: 44rpx;
          border-radius: 50%;
        }
        .user-name {
          font-size: 22rpx;
          font-weight: 400;
          color: #0D3333;
          line-height: 32rpx;
          padding: 0 16rpx;
        }
      }

      .date {
        height: 32rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #0D3333;
        line-height: 32rpx;
      }
    }
  }
}
</style>
